﻿<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
		</style>
	</head>

	<body>

		<div id="header"></div>
		<div id="orderInfo">
			<div class="container">
				<div class="row">

					<div style="margin:0 auto;margin-top:10px;width:950px;">
						<strong>订单详情</strong>
						<table class="table table-bordered">
							<tbody>
								<tr class="warning">
									<th colspan="5">订单编号:9005 </th>
								</tr>
								<tr class="warning">
									<th>图片</th>
									<th>商品</th>
									<th>价格</th>
									<th>数量</th>
									<th>小计</th>
								</tr>

								<tr v-for="(cartItem, i) in cart" class="active">
									<td width="60" width="40%">
										<input type="hidden" name="id" value="22">
										<img :src="path+cartItem.pimage" width="70" height="60">
									</td>
									<td width="30%">
										<a target="_blank"> {{cartItem.pname}}</a>
									</td>
									<td width="20%">
										￥{{cartItem.shopPrice}}
									</td>
									<td width="10%">
										{{cartItem.count}}
									</td>
									<td width="15%">
										<span class="subtotal">￥{{cartItem.shopPrice*cartItem.count}}</span>
									</td>

							</tbody>
						</table>
					</div>

					<div style="text-align:right;margin-right:120px;">
						商品金额: <strong id="total" style="color:#ff6600;">￥$total元</strong>
					</div>

				</div>

				<div>
					<hr/>
					<form class="form-horizontal" style="margin-top:5px;margin-left:150px;">
						<div class="form-group">
							<label for="username" class="col-sm-1 control-label">地址</label>
							<div class="col-sm-5">
								<input type="text" v-model="address" class="form-control" id="username" placeholder="请输入收货地址">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-1 control-label">收货人</label>
							<div class="col-sm-5">
								<input type="text" v-model="name" class="form-control" id="inputPassword3" placeholder="请输收货人">
							</div>
						</div>
						<div class="form-group">
							<label for="confirmpwd" class="col-sm-1 control-label">电话</label>
							<div class="col-sm-5">
								<input type="text" v-model="telephone" class="form-control" id="confirmpwd" placeholder="请输入联系方式">
							</div>
						</div>
					</form>

					<hr/>

					<div style="margin-top:5px;margin-left:150px;">
						<strong>选择银行：</strong>
						<p>
							<br/>
							<input type="radio" name="pd_FrpId" value="ICBC-NET-B2C" checked="checked" />工商银行
							<img src="./bank_img/icbc.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="BOC-NET-B2C" />中国银行
							<img src="./bank_img/bc.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="ABC-NET-B2C" />农业银行
							<img src="./bank_img/abc.bmp" align="middle" />
							<br/>
							<br/>
							<input type="radio" name="pd_FrpId" value="BOCO-NET-B2C" />交通银行
							<img src="./bank_img/bcc.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="PINGANBANK-NET" />平安银行
							<img src="./bank_img/pingan.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CCB-NET-B2C" />建设银行
							<img src="./bank_img/ccb.bmp" align="middle" />
							<br/>
							<br/>
							<input type="radio" name="pd_FrpId" value="CEB-NET-B2C" />光大银行
							<img src="./bank_img/guangda.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CMBCHINA-NET-B2C" />招商银行
							<img src="./bank_img/cmb.bmp" align="middle" />

						</p>
						<hr/>
						<p style="text-align:right;margin-right:100px;">
							<a href="javascript:void(0)" @click="sentOrder">
								<img src="./images/finalbutton.gif" width="204" height="51" border="0" />
							</a>
						</p>
						<hr/>

					</div>
				</div>

			</div>
		</div>

		<div style="margin-top:50px;">
			<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
		</div>

		<div style="text-align: center;margin-top: 5px;">
			<ul class="list-inline">
				<li>
					<a>关于我们</a>
				</li>
				<li>
					<a>联系我们</a>
				</li>
				<li>
					<a>招贤纳士</a>
				</li>
				<li>
					<a>法律声明</a>
				</li>
				<li>
					<a>友情链接</a>
				</li>
				<li>
					<a target="_blank">支付方式</a>
				</li>
				<li>
					<a target="_blank">配送方式</a>
				</li>
				<li>
					<a>服务声明</a>
				</li>
				<li>
					<a>广告声明</a>
				</li>
			</ul>
		</div>
		<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
			Copyright &copy; 2005-2016 天虎商城 版权所有
		</div>

	</body>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<script type="text/javascript" src="js/header.js"></script>
	<script>
		var $total = 0;
		var orderInfo = new Vue({
			el: "#orderInfo",
			data: {
				cart: {},
				total: 0,
				address: "",
				name: "",
				telephone: "",
			},
			methods: {
				getCategory: function(val) {
					var category = '';
					axios({
						url: "/ShopManagement/category/findOne",
						method: "get",
						params: {
							cid: val,
						},
					}).then(function(response2) {
						category = response2.data;
					}).catch(function(reason) {
						console.log("请求失败");
					});
					return category;
				},
				sentOrder: function() {
					var data = {
						'address': this.address,
						'name': this.name,
						'telephone': this.telephone,
					}
					axios({
						url: "/ShopManagement/order/save",
						method: "get",
						params: data,
					}).then(function(response2) {
						if(response2.data == 0) {
							//弹出一个询问框，有确定和取消按钮				
								//利用对话框返回的值 （true 或者 false）
								if(confirm("您必须先去登陆了来")) {
									window.location.href = "login.htm";
								} else {
									alert("点击了取消");
								}


						} else if(response2.data == 1) {
							alert("确认成功");
							window.location.href = "order_list.htm?pageNum=1&pagesize=1&timeASC=false";
						} else {
							alert("系统异常");
						}
					}).catch(function(reason) {
						console.log("请求失败");
					});
				},
			},
			mounted: function() {
				axios({
					url: "/ShopManagement/cart/getCart",
					method: "get",
					params: null,
				}).then(function(response) {
					orderInfo.cart = response.data;
					for(cartItem in orderInfo.cart) {
						var obj = orderInfo.cart[cartItem];
						orderInfo.total += obj.shopPrice * obj.count;

					}
					$("#total").html("￥" + orderInfo.total);
				}).catch(function(reason) {
					console.log("请求失败");
				});
			}

		});
	</script>

</html>